<template>
    <section style="padding-left: 20px;padding-bottom:20px;overflow-y:auto;" :style="{'height': height}">
        <el-col :span="24">
            <el-steps :active="selectedAllocationData.length>0 || step==3 ? 3 : (applyData.length>0 ? 2 : (searchData.length>0 ? 1 : 0))"
                      finish-status="success" simple style="width: 98%">
                <el-step title="第一步：搜索商品" icon="el-icon-search"></el-step>
                <el-step title="第二步：加入申请" icon="el-icon-circle-plus-outline"></el-step>
                <el-step title="第三步：提交计划" icon="el-icon-finished"></el-step>
                <el-step title="第四步：发起审批" icon="el-icon-news"></el-step>
            </el-steps>
            <div style="margin-top: 10px;">
                <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="16" height="16"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                <span style="font-size: 16px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">商品信息</span>
            </div>
            <el-row>
                <el-col style="width: 520px;border-top: 1px solid #ebeef5;border-left: 1px solid #ebeef5;border-right: 1px solid #ebeef5;">
                    <el-row style="height: 40px;padding: 6px;background-color: #f5f7fa;">
                        <el-input size="mini" v-model.trim="skuCode" style="width: 300px" placeholder="请输入款号/款名/sku" clearable>
                            <el-button slot="append" icon="el-icon-search" @click="searchSkuBtn"></el-button>
                        </el-input>&nbsp;
                        <el-upload action="/api/tool/fileImport" :show-file-list="false" style="display: inline"
                                   :headers="uploadHeaders"
                                   :data="uploadData"
                                   :on-success="(res)=>uploadSuccessHandle(res)"
                                   :before-upload="beforeUpload">
                            <el-button class="el-icon-upload2" type="primary" size="mini">批量导入</el-button>
                        </el-upload>
                        &nbsp;
                        <el-button type="text" size="mini" @click="downloadFile(groups == 4 ? '销售导入模板.xlsx' : '借赠导入模板.xlsx')">
                            <svg style="vertical-align: sub;" t="1720518191914" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5101" width="20" height="20"><path d="M901.851653 926.484607a48.255937 48.255937 0 0 1-14.274541 34.442195 48.844737 48.844737 0 0 1-34.457555 14.279661H170.419644a48.220097 48.220097 0 0 1-34.457555-14.279661 48.844737 48.844737 0 0 1-14.279662-34.442195V48.846068a48.317377 48.317377 0 0 1 14.279662-34.467795A48.844737 48.844737 0 0 1 170.419644 0.001331h418.800096a48.742337 48.742337 0 0 1 34.662355 14.131182l263.858857 263.910057a48.844737 48.844737 0 0 1 14.110701 34.667475z" fill="#EBECF0" p-id="5102"></path><path d="M901.851653 926.484607v48.767936a48.317377 48.317377 0 0 1-14.274541 34.467796 48.844737 48.844737 0 0 1-34.457555 14.279661H170.419644a48.844737 48.844737 0 0 1-48.788417-48.844737v-48.721856a48.204737 48.204737 0 0 0 14.279662 34.442195 48.844737 48.844737 0 0 0 34.457555 14.279661h682.648713a48.844737 48.844737 0 0 0 48.773056-48.783296z" fill="#C1C7D0" p-id="5103"></path><path d="M24.167034 536.423034h975.153932v243.849923a48.921536 48.921536 0 0 1-48.721856 48.844736H73.011771a48.342977 48.342977 0 0 1-34.467796-14.274541 48.844737 48.844737 0 0 1-14.376941-34.570195z" fill="#0AC905" p-id="5104"></path><path d="M121.733627 536.412794V438.856441L24.167034 536.412794z m780.118026 0l0.926719-97.556353 97.039234 97.556353z" fill="#168E2D" p-id="5105"></path><path d="M901.851653 312.628125v6.860791h-263.833257a48.844737 48.844737 0 0 1-48.844736-48.844737V0.001331a48.732097 48.732097 0 0 1 34.662355 14.115822l264.268456 263.751337a49.459136 49.459136 0 0 1 13.701102 34.754515z" fill="#C1C7D0" p-id="5106"></path><path d="M265.190721 764.037458H136.346088v-153.94284h126.335836v35.978193H187.382182v21.749732h63.590317v35.973073h-63.590317v24.268769h77.808539zM358.05716 720.532875l-25.098207 43.504583H276.065587l54.384569-80.322456-49.366976-73.620384h56.893366l21.754852 39.321549 22.589411-39.321549h56.888246L386.508963 683.725242l52.705212 80.317336H382.320809zM599.843726 668.662222h-47.682498q-3.353596-24.268768-27.612124-25.103327-27.612124 0.839679-28.446683 45.178821 0 41.845706 30.120921 41.830345 22.584291 0 25.937886-25.932766h48.522177q-8.376309 59.417523-73.625505 61.91096-78.648218-2.508797-81.151894-79.482777 4.177915-76.124061 76.96886-81.151894 69.43735 0.839679 76.96886 62.750638zM752.112328 764.037458h-128.844633v-153.94284h126.335836v35.978193H674.303789v21.749732h63.590317v35.973073H674.303789v24.268769h77.808539zM897.694219 764.037458H777.215655v-153.94284h51.036094v117.964647h69.44247z" fill="#FFFFFF" p-id="5107"></path></svg>
                            导入模板
                        </el-button>
                    </el-row>
                    <el-table :data="searchData" :max-height="480" size="small" v-loading="searchLoading"
                              @selection-change="selectedHander">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="img" label="图片" width="50">
                            <template slot-scope="{ row }">
                                <el-image :src="row.img" fit="contain" :preview-src-list="[row.img]">
                                    <div slot="error" class="image-slot">
                                        <svg t="1718681716906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2623" width="20" height="20"><path d="M400.696 268.795c-17.249 0-31.233 13.986-31.233 31.233v30.471c0 17.249 13.986 31.233 31.233 31.233s31.233-13.986 31.233-31.233v-30.471c0-17.249-13.985-31.233-31.233-31.233z" fill="#999999" p-id="2624"></path><path d="M623.649 361.734c17.249 0 31.234-13.986 31.234-31.233v-30.471c0-17.249-13.986-31.233-31.234-31.233s-31.233 13.986-31.233 31.233v30.471c-0.001 17.248 13.985 31.233 31.233 31.233z" fill="#999999" p-id="2625"></path><path d="M438.295 388.804c-14.656 9.104-19.155 28.362-10.050 43.013 11.209 18.047 41.976 48.59 86.157 48.59 43.958 0 75.1-30.313 86.574-48.223 9.303-14.529 5.068-33.847-9.455-43.15-14.539-9.298-33.852-5.068-43.15 9.455-0.122 0.199-13.38 19.45-33.969 19.45-20.009 0-32.444-18.128-33.278-19.373-9.166-14.423-28.28-18.805-42.829-9.761z" fill="#999999" p-id="2626"></path><path d="M824.508503 116.690676 571.592236 116.690676c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c40.181141 0 72.878844 32.692586 72.878844 72.878844l0 396.966057-189.334159-165.29465c-12.20088-10.655687-30.517037-10.207479-42.173518 0.9967L468.578048 674.16231 309.521472 517.519714c-11.895935-11.70253-30.903847-12.002358-43.154869-0.645706L126.957507 646.163629l0-394.126382c0-40.186258 32.692586-72.878844 72.878844-72.878844l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352S470.000444 116.690676 452.751594 116.690676L199.836351 116.690676c-74.632791 0-135.346571 60.71378-135.346571 135.346571l0 520.56405c0 74.632791 60.71378 135.346571 135.346571 135.346571l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352s-13.985526-31.233352-31.233352-31.233352L199.836351 845.481164c-40.186258 0-72.878844-32.692586-72.878844-72.878844l0-41.23924 160.003134-148.385539 159.428036 157.007917c12.048407 11.865235 31.361265 11.981892 43.546795 0.274246l198.576661-190.68697 208.876238 182.346001 0 40.683585c0 40.186258-32.697703 72.878844-72.878844 72.878844L571.592236 845.481164c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c74.627674 0 135.346571-60.71378 135.346571-135.346571L959.855074 252.037247C959.855074 177.404456 899.136178 116.690676 824.508503 116.690676z" fill="#999999" p-id="2627"></path></svg>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="product_name" align="center" label="款名" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="product_code" label="SKU" width="120"></el-table-column>
                        <el-table-column prop="use_num" label="可销数" width="80"></el-table-column>
                    </el-table>
                </el-col>
                <el-col style="width: 97px;margin: 0 10px;padding-top: 50px;">
                    <el-button type="primary" @click="pushApplyBtn" size="small" :disabled="selectedData.length==0" plain>
                        加入申请<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </el-col>
                <el-col style="width: 520px;border-top: 1px solid #ebeef5;border-left: 1px solid #ebeef5;border-right: 1px solid #ebeef5;">
                    <el-row style="height: 40px;padding: 10px;background-color: #f5f7fa;">
                        <span style="font-weight: bold;color: #909399">申请计划列表</span>
                        <div style="display: inline;float: right">
                            <el-popover placement="right-start" width="900" trigger="click">
                                <el-col :span="24">
                                    <div style="margin-bottom: 5px;">
                                        <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="16" height="16"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                                        <span style="font-size: 16px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">邮寄信息</span>
                                    </div>
                                    <el-row style="padding: 10px;margin:10px 0;border: 1px dashed #2d8cf0">
                                        <div style="color: #2d8cf0">智能识别</div>
                                        <el-input type="textarea" :rows="4" v-model="parseAddress" style="width: 85%;vertical-align: top;"
                                                  placeholder="智能解析：粘贴或者输入整段文字，自动识别姓名、号码、地址，如：王某某.1314***6768浙江省杭州市安吉县xxx街道xxx园区xx号"></el-input>
                                        <el-button style="margin-left: 4px;" type="success" @click="parseAddressBtn" :disabled="!parseAddress" size="mini">识别</el-button>
                                        <el-button style="margin-left: 4px;" type="primary" @click="parseAddress=''" size="mini" plain>清空</el-button>
                                    </el-row>
                                    <el-row>
                                        <span class="star" style="display: inline-block;width: 80px;">联系人：</span>
                                        <el-input v-model.trim="wp_user" placeholder="请输入联系人" style="width: 200px;" size="mini" clearable></el-input>&nbsp;&nbsp;
                                        <span class="star" style="display: inline-block;width: 90px;">联系电话：</span>
                                        <el-input v-model.trim="wp_phone" placeholder="请输入联系电话" style="width: 200px;" size="mini" clearable></el-input>&nbsp;&nbsp;
                                        <span class="star" style="display: inline-block;width: 80px;">运输方式：</span>
                                        <el-select size="mini" v-model="courier_type" style="width: 200px;" placeholder="请选择" @change="courierChange">
                                            <el-option value="快递" label="快递"></el-option>
                                            <el-option value="上门取货" label="上门取货"></el-option>
                                            <el-option value="无需快递" label="无需快递"></el-option>
                                            <el-option value="特别紧急-闪送、达达" label="特别紧急-闪送、达达"></el-option>
                                        </el-select>&nbsp;&nbsp;
                                    </el-row>
                                    <el-row v-if="courier_type=='快递'">
                                        <span class="star" style="display: inline-block;width: 80px;">选择快递：</span>
                                        <el-select size="mini" v-model="logistics_code" style="width: 200px;">
                                            <el-option v-for="(item, index) in logistics.list" :key="index" :label="item.name" :value="item.code" :disabled="item.code=='JDK-D'">
                                            </el-option>
                                        </el-select>
                                    </el-row>
                                    <el-row v-if="courier_type=='快递'" style="margin-top: 10px;">
                                        <span class="star" style="display: inline-block;width: 80px;">详细地址：</span>
                                        <el-cascader ref="addressRef" filterable size="mini" style="width: 300px" :options="address"
                                                     v-model="selected_address" placeholder="请选择省市区" @change="addressChange" clearable></el-cascader>
                                        <el-input v-model.trim="wp_address" placeholder="请输入详细地址" style="width: 490px" size="mini" clearable></el-input>
                                    </el-row>
                                    <el-row v-if="courier_type=='特别紧急-闪送、达达'" style="color: #67c23a; margin-top: 5px">
                                        取货地址：{{ logistics.sha_receive }} {{ logistics.sha_receive_tel }} {{ logistics.sha_place }}
                                    </el-row>
                                    <el-row style="margin-top: 10px;">
                                        <span class="star" style="display: inline-block;width: 80px;">发货方式：</span>
                                        <el-select size="mini" v-model="send_type" style="width: 200px" placeholder="请选择">
                                            <el-option value="0" label="立即发货"></el-option>
                                            <el-option value="1" label="计划发货"></el-option>
                                        </el-select>&nbsp;&nbsp;
                                        <template v-if="send_type==1">
                                            <span class="star" style="display: inline-block;width: 110px;">计划发货日期：</span>
                                            <el-date-picker :picker-options="pickerOptions" style="width: 200px" size="mini" v-model="send_date" value-format="yyyy-MM-dd" type="date"
                                                            placeholder="选择日期"></el-date-picker>
                                        </template>
                                    </el-row>
                                    <el-row style="margin-top: 10px;">
                                        <span class="star" style="display: inline-block;width: 80px;vertical-align: top;">申请事由：</span>
                                        <el-input type="textarea" style="width: 50%" v-model="reason" placeholder="请填写申请事由" :autosize="{ minRows: 2, maxRows: 2}"></el-input>
                                    </el-row>
                                    <el-row style="margin-top: 10px;">
                                        <span style="display: inline-block;width: 80px;vertical-align: top;">备注信息：</span>
                                        <el-input style="width: 50%" v-model="remark" placeholder="请填写备注信息" size="mini" type="textarea" :autosize="{ minRows: 2, maxRows: 2}" clearabl></el-input>
                                    </el-row>
                                    <el-row style="margin-top: 20px;">
                                        <el-button plain type="primary" class="el-icon-check" size="small" :loading="createLoading" :disabled="applyData.length==0"
                                            @click="createPlanBtn">&nbsp;确 定</el-button>
                                    </el-row>
                                </el-col>
                                <el-button slot="reference" class="el-icon-plus" type="text" style="color: #57a3f3;" size="mini" :disabled="applyData.length==0">&nbsp;提交计划</el-button>
                            </el-popover>&nbsp;&nbsp;
                            <el-button class="el-icon-delete" type="text" style="color: #F56C6C;" size="mini"
                                       @click="searchData=[];selectedData=[];applyData=[]">&nbsp;清空</el-button>
                        </div>
                    </el-row>
                    <el-table :data="applyData" :max-height="480" size="small" class="apply-data-table">
                        <el-table-column prop="img" label="图片" width="50">
                            <template slot-scope="{ row }">
                                <el-image :src="row.img" fit="contain" :preview-src-list="[row.img]">
                                    <div slot="error" class="image-slot">
                                        <svg t="1718681716906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2623" width="20" height="20"><path d="M400.696 268.795c-17.249 0-31.233 13.986-31.233 31.233v30.471c0 17.249 13.986 31.233 31.233 31.233s31.233-13.986 31.233-31.233v-30.471c0-17.249-13.985-31.233-31.233-31.233z" fill="#999999" p-id="2624"></path><path d="M623.649 361.734c17.249 0 31.234-13.986 31.234-31.233v-30.471c0-17.249-13.986-31.233-31.234-31.233s-31.233 13.986-31.233 31.233v30.471c-0.001 17.248 13.985 31.233 31.233 31.233z" fill="#999999" p-id="2625"></path><path d="M438.295 388.804c-14.656 9.104-19.155 28.362-10.050 43.013 11.209 18.047 41.976 48.59 86.157 48.59 43.958 0 75.1-30.313 86.574-48.223 9.303-14.529 5.068-33.847-9.455-43.15-14.539-9.298-33.852-5.068-43.15 9.455-0.122 0.199-13.38 19.45-33.969 19.45-20.009 0-32.444-18.128-33.278-19.373-9.166-14.423-28.28-18.805-42.829-9.761z" fill="#999999" p-id="2626"></path><path d="M824.508503 116.690676 571.592236 116.690676c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c40.181141 0 72.878844 32.692586 72.878844 72.878844l0 396.966057-189.334159-165.29465c-12.20088-10.655687-30.517037-10.207479-42.173518 0.9967L468.578048 674.16231 309.521472 517.519714c-11.895935-11.70253-30.903847-12.002358-43.154869-0.645706L126.957507 646.163629l0-394.126382c0-40.186258 32.692586-72.878844 72.878844-72.878844l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352S470.000444 116.690676 452.751594 116.690676L199.836351 116.690676c-74.632791 0-135.346571 60.71378-135.346571 135.346571l0 520.56405c0 74.632791 60.71378 135.346571 135.346571 135.346571l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352s-13.985526-31.233352-31.233352-31.233352L199.836351 845.481164c-40.186258 0-72.878844-32.692586-72.878844-72.878844l0-41.23924 160.003134-148.385539 159.428036 157.007917c12.048407 11.865235 31.361265 11.981892 43.546795 0.274246l198.576661-190.68697 208.876238 182.346001 0 40.683585c0 40.186258-32.697703 72.878844-72.878844 72.878844L571.592236 845.481164c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c74.627674 0 135.346571-60.71378 135.346571-135.346571L959.855074 252.037247C959.855074 177.404456 899.136178 116.690676 824.508503 116.690676z" fill="#999999" p-id="2627"></path></svg>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="product_name" align="center" label="款名" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="product_code" label="SKU" width="120"></el-table-column>
                        <el-table-column prop="num" label="申请数" align="center" width="90">
                            <template slot-scope="{row}">
                                <el-input size="mini" type="number" v-model.trim="row.num"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="groups == 4" prop="num" label="价格" align="center" width="90">
                            <template slot-scope="{row}">
                                <el-input size="mini" type="number" v-model.trim="row.price"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="60">
                            <template slot-scope="scope">
                                <el-button type="text" @click="delApplyBtn(scope.$index)" size="small" class="el-icon-delete" style="color: red;"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="24" style="margin-top: 10px;">
                    <div style="margin-bottom: 5px;">
                        <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="16" height="16"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                        <span style="font-size: 16px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">待发审批列表</span>
                    </div>
                    <el-table :data="data" style="width: 98%" :max-height="300" v-loading="loading" size="mini" border
                              :header-cell-style="{ background: '#F3F4F7', color: '#555' }" @selection-change="selectedBtn">
                        <el-table-column type="expand">
                            <template slot-scope="{row}">
                                <el-form label-position="left" class="demo-table-expand" size="mini">
                                    <el-form-item label="申请事由：">{{row.reason}}</el-form-item>
                                    <el-form-item label="快递单号：">{{ row.courier_number || row.ourier_number }}</el-form-item>
                                    <el-form-item label="发货时间：">{{ row.date || "立即发货" }}</el-form-item>
                                    <el-form-item label="收件信息：">
                                        <div v-if="row.wp_user && row.wp_phone && row.wp_address">
                                            {{ row.wp_user + "，" }} {{ row.wp_phone + "，"
                                            }}{{ row.wp_province }}{{ row.wp_city }}{{ row.wp_area
                                            }}{{ row.wp_address }}
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="sku编码：">
                                        <template v-for="(sku_code, index) in row.sku_codes">
                                            <el-tag size="mini">{{sku_code}}</el-tag>&nbsp;
                                        </template>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column type="selection" width="55"> </el-table-column>
                        <el-table-column prop="allocation_number" label="单号" width="170"></el-table-column>
                        <el-table-column prop="groups" label="类型">
                            <template slot-scope="{ row }">
                                <el-tag v-if="row.groups==1" type="warning" size="mini">赠送</el-tag>
                                <el-tag v-else-if="row.groups==2" size="mini">借出</el-tag>
                                <el-tag v-else-if="row.groups==3" type="success" size="mini">归还</el-tag>
                                <el-tag v-else-if="row.groups==4" type="sale" size="mini">销售</el-tag>
                                <span v-else>{{row.groups}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="wp_user" label="收件人"></el-table-column>
                        <el-table-column prop="createtime" label="发起时间"></el-table-column>
                        <el-table-column prop="plan_num" label="计划申请数量">
                            <template slot-scope="{ row }">
                                <div style="font-size: 14px;font-weight: bold">
                                    <span>{{ row.plan_num || 0 }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" label="计划发货日期">
                            <template slot-scope="{ row }">
                                {{ row.date || "立即发货" }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-col>
        <div style="width: 100%;position: absolute;bottom: 10px;padding: 8px;border-top: 1px #ebeef5 solid;">
            <el-button @click="closeBtn(0)">退 出</el-button>
            <el-button type="primary" class="el-icon-news" @click="approvalBtn" :loading="saveLoading"
                       :disabled="selectedAllocationData.length==0">&nbsp;{{ saveLoading ? '提交中 ...' : '发起审批' }}</el-button>
        </div>
    </section>
</template>

<script>

import {juyiList} from "@/api/oms/juyi";
import {getToken} from "@/libs/util";
import {lendApproval, lendCreatePlan, lendMyList} from "@/api/op/lend";
import { regionData } from "element-china-area-data";
import smart from "address-smart-parse";

export default {
    name: "myLendGive",
    props:{
        logistics:{
            type: Object,
            default: {}
        },
        groups:{
            type: Number,
            default: 0
        },
    },
    data() {
        return {
            height: window.innerHeight - 150+"px",
            user: {},
            nodeActions: [],
            loading: false,
            data: [],
            selectedAllocationData: [],

            step: 0,
            createLoading: false,
            address: [],
            saveLoading: false,
            searchLoading: false,
            searchData: [],
            applyData: [],
            selectedData: [],
            skuCode: "",
            remark: "",
            reason: "",
            wp_user: "",
            wp_phone: "",
            courier_type: "",
            logistics_code: "",
            selected_address: [],
            wp_province: "",
            wp_city: "",
            wp_area: "",
            wp_address: "",
            send_type: "",
            send_date: "",
            pickerOptions: {
                disabledDate(time) {
                    //Date.now()是javascript中的内置函数，它返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。
                    return time.getTime() < Date.now();
                },
            },

            uploadHeaders: {},
            uploadData:{type: 'op_lend', disk: 'excel'},

            //智能解析
            parseAddress: "",
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    methods: {
        closeBtn(refreshData){
            this.$emit("close-hander");
            if(refreshData){
                this.$emit("data-hander");
            }
        },
        getData(){
            let obj = {
                page: 1,
                limit: 1000,
                groups: [this.groups],
                status: [-1],
                data_status: 0
            };
            this.loading = true;
            lendMyList(obj).then((res) =>{
                this.loading = false;
                this.data = res.data.data;
            });
        },

        //下载
        downloadFile(name){
            window.open('/api/tool/fileExport'+`?path=template&type=file&name=${name}`, '_self');
        },
        uploadSuccessHandle(res){
            if(res.code === 0){
                this.applyData = res.data;
            }else{
                this.$message.error(res.msg);
            }
        },
        beforeUpload(file) {
            if(!/\.xlsx/.test(file.name)){
                this.$message.error('上传文件只能是 xlsx格式, 请下载导入示例模板!');
                return false;
            }
            this.uploadHeaders.Authorization = 'Bearer '+ getToken();
            return true;
        },
        //搜索申请的sku报次列表
        searchSkuBtn(){
            let obj = {
                page: 1,
                limit: 50,
                type_no: this.skuCode,
            };
            this.selectedData = [];
            this.searchLoading = true;
            juyiList(obj).then((res) =>{
                this.searchLoading = false;
                this.searchData = res.data.data;
            }).catch(()=>{
                this.searchLoading = false;
            })
        },
        selectedHander(list){
            this.selectedData = list;
        },
        pushApplyBtn(){
            let skuCodes = [];
            this.applyData.forEach((item) =>{
                skuCodes.push(item.product_code);
            });
            this.selectedData.forEach((item) =>{
                if(!skuCodes.includes(item.product_code)){
                    this.applyData.push({
                        img: item.img,
                        product_name: item.product_name,
                        product_code: item.product_code,
                        num: 1,
                        price: ""
                    })
                }
            });
            this.$message.warning("添加成功，若无需新增，请点击【提交计划】按钮，并发起审批")
        },
        delApplyBtn(index){
            this.applyData.splice(index, 1);
        },
        //智能解析
        parseAddressBtn(){
            const result = smart(this.parseAddress)
            console.log("智能识别", result)
            this.wp_user = result.name;
            this.wp_phone = result.phone;
            this.courier_type = "快递";
            this.wp_province = result.province;
            this.wp_city = result.city;
            this.wp_area = result.county;
            if(['北京市', '上海市', '天津市', '重庆市'].includes(this.wp_province)){
                if(/市辖区/.test(this.parseAddress)){
                    this.wp_city = "市辖区";
                }else if(this.wp_province=='重庆市'){
                    this.wp_city = "县";
                }else{
                    this.wp_city = "市辖区";
                }
            }
            this.wp_address = (!!result.street && result.address.indexOf(result.street)<0 ? result.street : "")
                + result.address.replace(this.wp_province, "").replace(this.wp_city, "").replace(this.wp_area, "");
            this.parseProvinceAddress(this.wp_province, this.wp_city, this.wp_area);
        },
        //遍历获取省市区
        parseProvinceAddress(wp_province, wp_city, wp_area){
            this.selected_address = [];
            this.address.forEach(provinceItem =>{
                if(provinceItem.label == wp_province){
                    this.selected_address.push(provinceItem.value);
                    provinceItem.children.forEach(cityItem => {
                        if(cityItem.label == wp_city){
                            this.selected_address.push(cityItem.value);
                            cityItem.children.forEach(areaItem => {
                                if(areaItem.label == wp_area){
                                    this.selected_address.push(areaItem.value);
                                }
                            })
                        }
                    })
                }
            })
        },
        //省市区
        addressChange(e){
            if (e.length) {
                this.$nextTick(() => {
                    let label = this.$refs.addressRef.getCheckedNodes();
                    let arr = label[0].pathLabels;
                    this.wp_province = arr[0];
                    this.wp_city = arr[1];
                    this.wp_area = arr[2] ? arr[2] : "";
                });
            } else {
                this.wp_province = "";
                this.wp_city = "";
                this.wp_area = "";
            }
        },
        //运输方式
        courierChange(e){
            if (e != "快递") {
                this.remark = e;
            } else {
                this.remark = "";
            }
        },
        selectedBtn(val){
            this.selectedAllocationData = val;
        },

        //确定提交计划
        createPlanBtn(){
            if(this.wp_user == ""){
                this.$message.warning("联系人, 不能为空");return;
            }
            if(this.wp_phone == ""){
                this.$message.warning("联系电话, 不能为空");return;
            }
            if(this.courier_type == ""){
                this.$message.warning("运输方式, 不能为空");return;
            }
            if(this.courier_type == "快递"){
                if(this.logistics_code == "" || this.wp_address == "" ||  this.wp_province == "" || this.wp_city==""){
                    this.$message.warning("选择快递、快递详细地址, 不能为空");return;
                }
            }
            if(this.send_type == ""){
                this.$message.warning("发货方式, 不能为空");return;
            }
            if(this.send_type == 1 && this.send_date == ""){
                this.$message.warning("计划发货日期, 不能为空");return;
            }
            if(this.reason == ""){
                this.$message.warning("申请事由, 不能为空");return;
            }
            if (this.send_type == 0) {
                this.remark = /立即发货$/.test(this.remark) ? this.remark : this.remark+" 立即发货";
            } else {
                this.remark = /计划发货日期/.test(this.remark) ? this.remark : this.remark+" 计划发货日期:" + this.send_date;
            }
            let obj = {
                wp_user: this.wp_user,
                wp_phone: this.wp_phone,
                wp_province: this.wp_province,
                wp_city: this.wp_city,
                wp_area: this.wp_area,
                wp_address: this.wp_address,
                groups: this.groups,
                remark: this.remark,
                reason: this.reason,
                courier_type: this.courier_type,
                logistics_code: this.logistics_code,
                send_type: this.send_type,
                send_date: this.send_date,
                detail: []
            };
            this.applyData.forEach(item =>{
                obj.detail.push({sku_code: item.product_code, num: item.num, price: item.price});
            });
            this.createLoading = true;
            lendCreatePlan(obj).then((res) =>{
                this.createLoading = false;
                if(res.code === 0){
                    this.step = 3;
                    this.$message.success(res.msg);
                    this.getData();
                    this.applyData = [];
                    this.searchData = [];
                    this.selectedData = [];
                    //随机获取一个外部DOM点击，取消弹窗
                    document.getElementsByClassName("el-steps")[0].click();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(() =>{
                this.createLoading = false;
            })
        },
        //发起审批
        approvalBtn(){
            let allocationNumbers = [];
            this.selectedAllocationData.forEach(item =>{
                allocationNumbers.push(item.allocation_number);
            });
            this.$confirm("确定发起审批?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.saveLoading = true;
                lendApproval({allocation_number:allocationNumbers, groups: this.groups}).then((res) =>{
                    this.saveLoading = false;
                    if(res.code === 0){
                        this.$message.success(res.msg);
                        this.closeBtn(1);
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(() =>{
                    this.saveLoading = false;
                })
            }).catch(() => {});
        },
    },
    mounted() {
        this.getData();
        this.address = JSON.parse(JSON.stringify(regionData));
        //6.0版本以上  没有香港、澳门，需手动添加下
        this.address.push({label:"香港特别行政区", value:"66",
            children:[
                {label:"中西區", value:"6601"},
                {label:"灣仔區", value:"6602"},
                {label:"東區", value:"6603"},
                {label:"南區", value:"6604"},
                {label:"油尖旺區", value:"6605"},
                {label:"深水埗區", value:"6606"},
                {label:"九龍城區", value:"6607"},
                {label:"黃大仙區", value:"6608"},
                {label:"觀塘區", value:"6609"},
                {label:"荃灣區", value:"6610"},
                {label:"屯門區", value:"6611"},
                {label:"元朗區", value:"6612"},
                {label:"北區", value:"6613"},
                {label:"大埔區", value:"6614"},
                {label:"西貢區", value:"6615"},
                {label:"沙田區", value:"6616"},
                {label:"葵青區", value:"6617"},
                {label:"離島區", value:"6618"}
            ]
        });
        this.address.push({label:"澳门特别行政区", value:"67",
            children:[
                {label:"花地瑪堂區", value:"6701"}
            ]
        });
    }
}
</script>

<style scoped>
.star::before {
    content: "* ";
    color: #F56C6C;
}
.demo-table-expand /deep/ label {
    width: 80px;
    color: #99a9bf;
    font-size: 12px;
}
.demo-table-expand /deep/ div {
    font-size: 12px;
    color: #99a9bf;
}
/deep/ .el-form-item--mini.el-form-item{
    margin-bottom: 0;
}
/deep/ .el-steps--simple{
    padding: 6px 8%;
}
/deep/ .el-step.is-simple .el-step__title{
    font-size: 14px;
}

.apply-data-table /deep/ .el-input__inner{
    padding: 0 2px;
}

/*我要销售*/
.el-tag.el-tag--sale {
    background-color: #ecd3f9;
    border-color: #dfb7f3;
    color: #b424ef;
}
</style>
